<!DOCTYPE html>
<html>
	<head>
		 <meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

		<script src="../../codebase/webix/webix.js" type="text/javascript"></script>
		<script src="../../codebase/scheduler.js" type="text/javascript"></script>

		<link rel="stylesheet" type="text/css" href="../../codebase/webix/skins/touch.css">
		<link rel="stylesheet" type="text/css" href="../../codebase/scheduler.css">


		<title>Event colors</title>
		<script type="text/javascript" charset="utf-8">

			var data = [
				{id:"1",text:"Event 1",start_date:"2014-07-01 15:00:00","end_date":"2014-07-01 19:00:00",color:"#66ccff"},
				{id:"2",text:"Event 2",start_date:"2014-07-02 09:30:00","end_date":"2014-07-02 12:00:00",color:"#cc99ff"},
				{id:"3",text:"Event 3",start_date:"2014-07-04 11:00:00","end_date":"2014-07-04 13:45:00",color:"#66ccff"},
				{id:"4",text:"Event 4",start_date:"2014-07-05 10:15:00","end_date":"2014-07-05 12:00:00",color:"#cc99ff"},
				{id:"5",text:"Event 5",start_date:"2014-07-05 19:00:00","end_date":"2014-07-05 22:00:00",color:"#00cccc"},
				{id:"6",text:"Event 6",start_date:"2014-07-15 09:00:00","end_date":"2014-07-15 19:30:00",color:"#66ccff"},
				{id:"7",text:"Event 7",start_date:"2014-07-27 14:30:00","end_date":"2014-07-27 18:00:00",color:"#00cccc"}
			];
			/*initial date (today by default)*/
			scheduler.config.init_date = new Date(2014,6,1);
			

			webix.ready(function(){
				webix.ui.fullScreen();
    			webix.ui({
					view: "scheduler",
					id: "scheduler"
				});
				$$("scheduler").parse(data,"json");
			});
		</script>
</head>
	<body>
	</body>
</html>
